<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--引入本地的css样式-->
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/admin.css" media="all">

</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="employee_name" placeholder="输入用户名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                角色：
                <div class="layui-inline">
                    <select name="city" lay-verify="">
                        <option value="">-请选择-</option>
                        <option value="010">北京</option>
                        <option value="021">上海</option>
                        <option value="0571">杭州</option>
                    </select>

                </div>是否启用：
                <div class="layui-inline">
                    <select name="isEnable" lay-verify="">
                        <option value="010" selected>启用</option>
                        <option value="021">未启用</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-admin" id="add_employee" data-type="add_employee">添加</button>
            </div>

            <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>

        </div>
    </div>
</div>

<script src="../../static/js/jquery-3.6.0.min.js"></script>
<!--引入本地layui.js-->
<script src="../../static/layui/layui.js"></script>
<!--js-->
<script type="text/javascript">
    layui.config({
        base: '../../static/layui/layuiadmin/' //静态资源所在路径js
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');
</script>

<script type="text/javascript">
    layui.use(['table','form'], function() {
        var table = layui.table;
        table.render({
            elem: '#LAY-user-back-manage'//绑定到哪一个表格：#id值
            , url: '/system/userManagement'//servlet绑定路径
            , title: '用户数据表'
            , cols: [[
                {field: 'id', title: 'id'}
                , {field: 'username', title: '登陆账号', width: 100}
                , {field: 'nickname', title: '用户名称',}
                , {field: 'role', title: '角色', width: 80}
                , {field: 'creation_time', title: '创建时间'}
                , {field: 'state', title: '是否启用', templet: "#ts", width: 80}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 280}
            ]]
            , page: true
            , limits: [5, 10, 15, 20]
        });
        //监听添加、和删除事件
        $("#add_employee").click(function () {
            layer.open({
                type: 2
                , title: '添加员工'
                , content: 'add.html'
                , area: ['50%', '60%']
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var submitData = body.find('#myform').serialize();//把add.html中表单中所有参数通过Ajax的data:submitData传递给服务器端
                    //提交 Ajax 成功后，静态表单中的数据
                    $.ajax({
                        url: "/system/userManagementAdd",
                        type: "post",
                        data: submitData,//所有表单中参数值
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg(res.msg, {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                }, function () {
                                    //刷新
                                    window.location.reload();
                                });
                            }
                            if (res.code == 500) {
                                layer.msg(res.msg, {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                }, function () {
                                    //刷新
                                    window.location.reload();
                                });
                            }
                            layer.close(index); //关闭弹层
                        }
                    })
                }
                , success: function (layero, index) {//点击弹出框时，执行的函数。
                    //获取弹出编辑框的body内容
                    var body = layer.getChildFrame('body', index);
                    body.find("input[name=employee_id]").val(data.employee_id);
                    //找到body中input输入框，向employee_name输入框中塞入选中行的值
                    body.find("input[name=employee_name]").val(data.employee_name);
                }
            });

        })
        //监听行工具事件
        table.on('tool(LAY-user-back-manage)', function (obj) {
            var data = obj.data;//选中的当前行的数
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //通过ajax实现真正的删除
                    $.ajax({
                        url: "/system/userManagementDelUser",
                        type: "post",
                        data: {id: data.id},
                        dataType: "json",
                        success: function (res) {
                            layer.alert(res.msg);
                            obj.del();//页面删除obj.del()
                            layer.close(index);
                        }
                    })

                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2
                    , title: '编辑员工'
                    , content: 'edit.html'
                    , area: ['450px', '400px']
                    , maxmin: true
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        var submitData = body.find('#myeditform').serialize();
                        //提交 Ajax 成功后，静态表单中的数据
                        $.ajax({
                            url: "/system/userManagementModify",
                            type: "post",
                            data: submitData,
                            // data:submitData,
                            dataType: "json",
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.msg(res.msg, {
                                        offset: '15px'
                                        , icon: 0.
                                        , time: 1000
                                    }, function () {
                                        //刷新
                                        window.location.reload();
                                    });
                                }
                                if (res.code == 500) {
                                    layer.msg(res.msg, {
                                        offset: '15px'
                                        , icon: 1
                                        , time: 1000
                                    }, function () {
                                        //刷新
                                        window.location.reload();
                                    });
                                }
                                layer.close(index); //关闭弹层

                            }
                        })

                    }
                    , success: function (layero, index) {//点击弹出框时，执行的函数。
                        //获取弹出编辑框的body内容
                        var body = layer.getChildFrame('body', index);
                        body.find("input[name=id]").val(data.id);
                        //找到body中input输入框，向employee_name输入框中塞入选中行的值
                        body.find("input[name=username]").val(data.username);
                        body.find("input[name=nickname]").val(data.nickname);
                        body.find("input[name=password]").val(data.password);
                        body.find("input[name=role]").val(data.role);
                        body.find("input[name=state]").val(data.state);
                    }
                });
            } else if (obj.event === 'yu') {
                var data = obj.data;//选中的当前行的数
                layer.open({
                    type: 2

                    , title: '预付款'
                    , content: 'yuList.html'
                    , area: ['850px', '400px']
                    , maxmin: true
                    , success: function (layero, index) {//点击弹出框时，执行的函数。
                        //获取弹出编辑框的body内容
                        var body = layer.getChildFrame('body', index);
                        //找到body中input输入框，向employee_name输入框中塞入选中行的值
                        body.find("input[name=username]").val(data.username);
                    }
                });


            }

        })
    });

</script>

<script type="text/html" id="ts">
    {{#  if(d.state == 1){ }}
    <p>启用</p>
    {{#  } else { }}
    <p>未启用</p>
    {{#  } }}
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="yu">预付款</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">LOG日志</a>
</script>

</body>
</html>

